<template>
  <div class="dashboard_images-container" v-loading="loading">
    <el-row :gutter="20">
      <!--新增商品 start-->
      <el-col>
        <el-card>
          <div slot="header" class="clearfix">
            <span>快捷起草</span>
          </div>
          <div class="menus">
            <div class="ments-item" v-if="checkIsauth('purchase-plan-add') && checkIsauth('purchase-plan')">
              <router-link to="/purchase/purchase-plan-add">
                <div>
                  <img src="../../assets/dashboard_images/1.png">
                </div>
                <div>采购计划</div>
              </router-link>
            </div>
            <div class="ments-item" v-if="checkIsauth('purchase-contract-add') && checkIsauth('purchase-contract')">
              <router-link to="/purchase/purchase-contract-add">
                <div>
                  <img src="../../assets/dashboard_images/2.png">
                </div>
                <div>合同管理</div>
              </router-link>
            </div>
            <div class="ments-item" v-if="checkIsauth('purchase-warehousing-add') && checkIsauth('purchase-warehousing')">
              <router-link to="/purchase/purchase-warehousing-add">
                <div>
                  <img src="../../assets/dashboard_images/3.png">
                </div>
                <div>采购入库</div>
              </router-link>
            </div>
            <div class="ments-item" v-if="checkIsauth('supplier-returns-add') && checkIsauth('supplier-returns')">
              <router-link to="/purchase/supplier-returns-add">
                <div>
                  <img src="../../assets/dashboard_images/4.png">
                </div>
                <div>供应商退货</div>
              </router-link>
            </div>
            <div class="ments-item" v-if="checkIsauth('supplier-settlement')">
              <router-link to="/purchase/supplier-settlement">
                <div>
                  <img src="../../assets/dashboard_images/5.png">
                </div>
                <div>供应商结算</div>
              </router-link>
            </div>
            <div class="ments-item" v-if="checkPermission(['order'])">
              <router-link to="/sales/order">
                <div>
                  <img src="../../assets/dashboard_images/6.png">
                </div>
                <div>销售订单</div>
              </router-link>
            </div>
            <div class="ments-item" v-if="checkPermission(['orderReturnAdd']) && checkPermission(['orderReturn'])">
              <router-link to="/sales/order-return">
                <div>
                  <img src="../../assets/dashboard_images/7.png">
                </div>
                <div>订单退货</div>
              </router-link>
            </div>
            <div class="ments-item" v-if="checkPermission(['warehouse-out'])">
              <router-link to="/sales/warehouse-out">
                <div>
                  <img src="../../assets/dashboard_images/8.png">
                </div>
                <div>出库管理</div>
              </router-link>
            </div>
            <div class="ments-item" v-if="checkIsauth('goods-transfer-add') && checkIsauth('goods-transfer')">
              <router-link to="/stock/goods-transfer-add">
                <div>
                  <img src="../../assets/dashboard_images/9.png">
                </div>
                <div>商品调拨</div>
              </router-link>
            </div>
            <div class="ments-item" v-if="checkIsauth('goods-lend-add') && checkIsauth('goods-lend')">
              <router-link to="/stock/goods-lend-add">
                <div>
                  <img src="../../assets/dashboard_images/10.png">
                </div>
                <div>商品借出</div>
              </router-link>
            </div>
            <div class="ments-item" v-if="checkPermission(['goods-exchange-add']) && checkPermission(['goods-exchange'])">
              <router-link to="/stock/goods-exchange-add">
                <div>
                  <img src="../../assets/dashboard_images/11.png">
                </div>
                <div>商品换货</div>
              </router-link>
            </div>
            <div class="ments-item" v-if="checkPermission(['goods-inventory-add']) && checkPermission(['goods-inventory'])">
              <router-link to="/stock/goods-inventory-add">
                <div>
                  <img src="../../assets/dashboard_images/12.png">
                </div>
                <div>库存盘点</div>
              </router-link>
            </div>
            <div class="ments-item" v-if="checkPermission(['goods-inventoryLoss-add']) && checkPermission(['goods-inventoryLoss'])">
              <router-link to="/stock/goods-inventoryLoss-add">
                <div>
                  <img src="../../assets/dashboard_images/13.png">
                </div>
                <div>库存报损</div>
              </router-link>
            </div>
            <div class="ments-item" v-if="checkIsauth('goods-understock')">
              <router-link to="/stock/goods-understock">
                <div>
                  <img src="../../assets/dashboard_images/14.png">
                </div>
                <div>库存预警</div>
              </router-link>
            </div>
          </div>
        </el-card>
      </el-col>
      <!--新增商品 end-->
    </el-row>
    <el-row :gutter="20" style="margin-bottom: 0">
      <el-col :span="12" v-if="checkIsauth('goods-understock')">
        <el-card class="box-card" style="height:350px;">
          <div slot="header" class="clearfix">
            <span>库存预警</span>
            <router-link to="/stock/goods-understock">
              <el-button style="float: right; padding: 3px 0" type="text">查看更多</el-button>
            </router-link>
          </div>
          <ul class="list-unstyled">
            <li v-for="(row, key) in tableData">
              <router-link :to="'/stock/goods-understock?name=' + row.name">
                {{ row.sn }} {{ row.name }} {{ row.specification }} {{ row.dept_name }} {{ row.warehouse_name }}
              </router-link>
            </li>
          </ul>
        </el-card>
      </el-col>
      <el-col :span="12" v-if="checkPermission(['order'])">
        <el-card style="height: 350px;">
          <div slot="header" class="clearfix">
            <span>待出库订单列表</span>
            <router-link to="/sales/order">
              <el-button style="float: right; padding: 3px 0" type="text">查看更多</el-button>
            </router-link>
          </div>
          <div class="goods-statistics">
            <el-table :data="OrderList.data" :loading="loading" :header-cell-style="{ textAlign: 'center' }">
              <el-table-column prop="sn" label="订单编号">
              </el-table-column>
              <el-table-column prop="warehouse_name" label="仓库名称">
              </el-table-column>
              <el-table-column prop="create_time" label="下单时间">
                <template slot-scope="scope">{{ scope.row.create_time | unixToDate }}</template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px;padding-bottom:40px" v-if="checkIsauth('goods-lend-add') && checkIsauth('goods-lend')">
      <el-col :span="12">
        <el-card class="box-card" style="height:350px;">
          <div slot="header" class="clearfix">
            <span>待归还商品</span>
            <router-link to="/stock/goods-lend?status=CONFIRMED">
              <el-button style="float: right; padding: 3px 0" type="text">查看更多</el-button>
            </router-link>
          </div>
          <div class="goods-statistics">
            <el-table :data="goodsLendListWaitReturnData.data" :loading="loading"
              :header-cell-style="{ textAlign: 'center' }">
              <el-table-column prop="product_name" label="商品名称">
                <template slot-scope="scope">
                  <router-link style="color: #409eff;"
                    :to="{ name: 'goodsLendReturn', params: { id: scope.row.lend_id } }">{{
                      scope.row.product_name }}</router-link>
                </template>
              </el-table-column>
              <el-table-column prop="product_sn" label="商品编号" />
              <el-table-column prop="category_name" label="商品类别" />
              <el-table-column prop="specification" label="规格型号" />
              <el-table-column prop="lend_num" label="借出数量" />
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as API_goods from '@/api/goods'
import { mapGetters } from 'vuex'
import * as API_order from '@/api/order'
import { generateTitle } from '@/utils/i18n'
import * as API_GoodsLend from '@/api/goodsLend'
import store from '@/store'
export default {
  name: 'dashboard_images',
  computed: {
    ...mapGetters([
      'permission_routers'
    ])
  },
  data() {
    return {
      purchaseList: [],
      stockList: [],
      listAll: [],
      OrderList: [],
      goodsLendListWaitReturnData: [],
      params: {
        page_no: 1,
        page_size: 9
      },
      loading: false,
      goodsList: null,
      memberList: null,
      tableHeight: (document.body.clientHeight - 250) / 2,
      franchiseData: {},
      /** 列表数据 */
      tableData: []
    }
  },
  filters: {
    secrecyMobile(mobile) {
      mobile = String(mobile)
      if (!/\d{11}/.test(mobile)) {
        return mobile
      }
      return mobile.replace(/(\d{3})(\d{4})(\d{4})/, '$1****$3')
    }
  },
  activated() {
    window.onresize = this.countTableHeight
  },
  mounted() {
    if (this.permission_routers.some(v => v.name === 'stock')) {
      this.stockList = this.permission_routers.find(function(sc) { return sc.name === 'stock' })
    }
    if (this.permission_routers.some(v => v.name === 'purchase')) {
      this.purchaseList = this.permission_routers.find(function(sc) { return sc.name === 'purchase' })
    }
    this.listAll = []
    if (this.stockList.children && this.purchaseList.children) {
      this.listAll = this.stockList.children.concat(this.purchaseList.children)
    } else if (this.purchaseList.children) {
      this.listAll = this.purchaseList.children
    } else if (this.stockList.children) {
      this.listAll = this.stockList.children
    }
    this.GET_WarningGoodsList()
    this.GET_OrderList()
    this.GET_GoodsLendList()
  },
  methods: {
    /** 获取调整单列表 */
    GET_GoodsLendList() {
      this.loading = true
      API_GoodsLend.getGoodsLendListWaitReturn(this.params).then(response => {
        this.loading = false
        this.goodsLendListWaitReturnData = response
      })
    },
    GET_OrderList() {
      API_order.getOrderList({
        page_no: 1,
        page_size: 9,
        status: 'WAIT_WAREHOUSE_OUT'
      }).then(response => {
        this.OrderList = response
      })
    },
    checkIsauth(e) {
      return this.listAll.some(function(v) { return v.path === e })
    },
    GET_WarningGoodsList() {
      API_goods.getWarningGoodsList(this.params).then(response => {
        this.tableData = response.data
      })
    },
    /** 窗口缩放时计算table高度 */
    countTableHeight() {
      this.tableHeight = (document.body.clientHeight - 80 - 44 - 80 - 80 - 20 - 20 - 4) / 2
      /** 图表刷新 */
      setTimeout(this.sesalChart.resize)
    }
  }
}
</script>

<style type="text/scss" lang="scss" scoped>
/deep/ .el-table td:not(.is-left) {
  text-align: center;
}

.list-unstyled {
  font-size: 14px;

  li {
    padding-bottom: 5px;
    color: rgb(60, 141, 188);
    cursor: pointer;
    padding: 5.7px 0;
    overflow: hidden; //超出的文本隐藏
    text-overflow: ellipsis; //溢出用省略号显示
    white-space: nowrap; // 默认不换行；
  }

  a {
    color: rgb(60, 141, 188);
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

.menus {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  font-size: 13px;
  padding: 30px 0 110px 0;

  .ments-item {
    img {
      width: 45px;
      padding-bottom: 10px;
    }

    a {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    cursor: pointer;
  }
}

.dashboard_images-container {
  height: 100%;
  padding: 20px 20px;

  .flex-center {
    height: 104px;
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    align-items: center;

    .felx-left {
      width: 56px;
      margin-right: 16px;

      img {
        width: 100%;
      }
    }

    .felx-right {
      .num {
        font-size: 24px;
      }

      .title {
        color: #747474;
      }
    }
  }

  .shopping-info {
    display: flex;
    align-items: center;
    padding: 20px 0;

    .shopping-info-item {
      flex: 1;
      margin-right: 20px;
      margin-bottom: 20px;
      height: 68px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #747474;

      .num {
        height: 48px;
        line-height: 48px;
        font-size: 16px;
        font-weight: 600;
        color: #333;
        // margin-bottom: 15px;
      }

      &:last-child {
        margin-right: 0px;
      }
    }
  }

  /deep/ .el-card__body {
    padding: 10px;
  }

  .goods-statistics {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    text-align: center;

    a {
      display: block;
      margin: 0;
      width: 75%;

      button {
        height: 50px;
        width: 400px;
      }
    }
  }

  .goods-image {
    width: 50px;
    height: 50px;
  }
}

.el-row {
  position: relative;
  margin-bottom: 20px;
}

.el-col {
  border-radius: 4px;
}

.goods-name {
  color: #606266;
}

.o2o-goods-name {
  color: #4183c4;
}
</style>
